<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom :columns="columns"
                   :tableData="tableData"
                   :total="page.total"
                   :viewFunc="handleView"
                   :delFunc="handleDelete"
                   :refresh="getData"
                   :currentPage="page.currentPage"
                   :changePage="changePage"
                   :page-size="page.pageSize"
                   :pagination="page">
        <template #senderType="{ rows }">
          <el-tag :type="rows.senderType == '老师' ? 'danger' : (rows.senderType == '家长' ? 'success' : 'primary')">
            {{ rows.senderType }}
          </el-tag>
        </template>
      </TableCustom>

    </div>
    <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData">
      </TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import TableCustom from '@/components/yjh-table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/yjh-table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import {deleteComment, insertComment, listComment, listCommentView, updateComment} from "@/api/forComment";
import {CommentView} from "@/types/CommentView";
import {showMessage} from "@/utils/yjh_utli";
import {ElMessage} from "element-plus";

// 查询相关
const query = reactive({
  title: '',
  sender: '',
  senderType: null,
  sendTimeRange: null,
});
const searchOpt = ref<FormOptionList[]>([
  { type: 'input', label: '活动标题：', prop: 'title' },
  { type: 'input', label: '发送人：', prop: 'sender' },
  { type: 'select-sender', label: '发送者身份：', prop: 'senderType' },
  { type: 'datetimerange', label: '时间范围：', prop: 'sendTimeRange', format: 'YYYY-MM-DDTHH:mm:ss'},
])
const handleSearch = async () => {
  const res = await listCommentView({
    ...{
    pageSize: page.pageSize,
    pageNum: 1,
  },
    ...query
  })
  showMessage(res)
  tableData.value = res.data.list;
  page.total = res.data.total
  page.currentPage = 1;
};

// 表格相关
let columns = ref([
  { prop: 'id', label: '评论编号' , width: 100 },
  { prop: 'title', label: '活动标题' , width: 200 },
  { prop: 'content', label: '内容' },
  { prop: 'senderType', label: '身份' , width: 50 },
  { prop: 'sender', label: '姓名' , width: 150 },
  { prop: 'sendTime', label: '发送时间' , width: 180 },
  { prop: 'operator', label: '操作', width: 200 },
])
const page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
})
const tableData = ref<CommentView[]>([]);
const getData = async () => {
  const res = await listCommentView({
    ...{
      pageSize: page.pageSize,
      pageNum: page.currentPage,
    },
    ...query
  })
  tableData.value = res.data.list;
  page.total = res.data.total
  return res
};
getData();

const changePage = (val: number) => {
  page.currentPage = val;
  getData();
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: []
});
const handleView = (row: CommentView) => {
  visible1.value = true;
  viewData.value.row = { ...row }
  viewData.value.list = [
    { prop: 'id', label: '评论编号' },
    { prop: 'title', label: '活动标题' },
    { prop: 'content', label: '内容' },
    { prop: 'senderType', label: '身份' },
    { prop: 'sender', label: '姓名' },
    { prop: 'sendTime', label: '发送时间' },
  ]
};

// 删除相关
const handleDelete = async (row: CommentView) => {
  const res = await deleteComment({id: row.id})
  showMessage(res)
  // page.currentPage = 1
  getData()
}
</script>

<style scoped>
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
